<div class="cal-week-view" role="grid">
  <div class="cal-day-headers" role="row">
    @for (user of users; track trackByUserId($index, user)) {
      <div class="cal-header" tabindex="0" role="columnheader">
        <b>{{ user.name }}</b>
      </div>
    }
  </div>
  @if (view.allDayEventRows.length > 0) {
    <div
      class="cal-all-day-events"
      #allDayEventsContainer
      mwlDroppable
      (dragEnter)="dragEnter('allDay')"
      (dragLeave)="dragLeave('allDay')"
    >
      <div class="cal-day-columns">
        <div
          class="cal-time-label-column"
          [ngTemplateOutlet]="allDayEventsLabelTemplate"
        ></div>
        @for (day of days; track day.date.toISOString()) {
          <div
            class="cal-day-column"
            mwlDroppable
            dragOverClass="cal-drag-over"
            (drop)="eventDropped($event, day.date, true)"
            (dragEnter)="dateDragEnter(day.date)"
          ></div>
        }
      </div>
      @for (eventRow of view.allDayEventRows; track eventRow.id) {
        <div #eventRowContainer class="cal-events-row">
          @for (
            allDayEvent of eventRow.row;
            track allDayEvent.event.id ?? allDayEvent.event
          ) {
            <div
              #event
              class="cal-event-container"
              [class.cal-draggable]="
                allDayEvent.event.draggable && allDayEventResizes.size === 0
              "
              [class.cal-starts-within-week]="!allDayEvent.startsBeforeWeek"
              [class.cal-ends-within-week]="!allDayEvent.endsAfterWeek"
              [ngClass]="allDayEvent.event?.cssClass"
              [style.width.%]="(100 / users.length) * allDayEvent.span"
              [style.marginLeft.%]="(100 / users.length) * allDayEvent.offset"
              mwlDraggable
              dragActiveClass="cal-drag-active"
              [dropData]="{ event: allDayEvent.event, calendarId: calendarId }"
              [dragAxis]="{
                x: allDayEvent.event.draggable && allDayEventResizes.size === 0,
                y:
                  !snapDraggedEvents &&
                  allDayEvent.event.draggable &&
                  allDayEventResizes.size === 0,
              }"
              [dragSnapGrid]="snapDraggedEvents ? { x: dayColumnWidth } : {}"
              [validateDrag]="validateDrag"
              (dragStart)="
                dragStarted(eventRowContainer, event, allDayEvent, false)
              "
              (dragging)="allDayEventDragMove()"
              (dragEnd)="dragEnded(allDayEvent, $event, dayColumnWidth)"
            >
              <mwl-calendar-week-view-event
                [locale]="locale"
                [weekEvent]="allDayEvent"
                [tooltipPlacement]="tooltipPlacement"
                [tooltipTemplate]="tooltipTemplate"
                [tooltipAppendToBody]="tooltipAppendToBody"
                [tooltipDelay]="tooltipDelay"
                [customTemplate]="eventTemplate"
                [eventTitleTemplate]="eventTitleTemplate"
                [eventActionsTemplate]="eventActionsTemplate"
                [daysInWeek]="daysInWeek"
                (eventClicked)="
                  eventClicked.emit({
                    event: allDayEvent.event,
                    sourceEvent: $event.sourceEvent,
                  })
                "
              />
            </div>
          }
        </div>
      }
    </div>
  }
  <div
    class="cal-time-events"
    mwlDroppable
    (dragEnter)="dragEnter('time')"
    (dragLeave)="dragLeave('time')"
  >
    @if (view.hourColumns.length > 0) {
      <div class="cal-time-label-column">
        @for (
          hour of view.hourColumns[0].hours;
          track hour.segments[0].date.toISOString();
          let odd = $odd
        ) {
          <div class="cal-hour" [class.cal-hour-odd]="odd">
            @for (segment of hour.segments; track segment.date.toISOString()) {
              <mwl-calendar-week-view-hour-segment
                [style.height.px]="hourSegmentHeight"
                [segment]="segment"
                [segmentHeight]="hourSegmentHeight"
                [locale]="locale"
                [customTemplate]="hourSegmentTemplate"
                [isTimeLabel]="true"
              />
            }
          </div>
        }
      </div>
    }
    <div
      class="cal-day-columns"
      [class.cal-resize-active]="timeEventResizes.size > 0"
      #dayColumns
    >
      @for (
        column of view.hourColumns;
        track column.hours[0]
          ? column.hours[0].segments[0].date.toISOString()
          : column
      ) {
        <div class="cal-day-column">
          <mwl-calendar-week-view-current-time-marker
            [columnDate]="column.date"
            [dayStartHour]="dayStartHour"
            [dayStartMinute]="dayStartMinute"
            [dayEndHour]="dayEndHour"
            [dayEndMinute]="dayEndMinute"
            [hourSegments]="hourSegments"
            [hourSegmentHeight]="hourSegmentHeight"
            [customTemplate]="currentTimeMarkerTemplate"
          />
          @for (
            timeEvent of column.events;
            track timeEvent.event.id ?? timeEvent.event
          ) {
            <div
              #event
              class="cal-event-container"
              [class.cal-draggable]="
                timeEvent.event.draggable && timeEventResizes.size === 0
              "
              [class.cal-starts-within-day]="!timeEvent.startsBeforeDay"
              [class.cal-ends-within-day]="!timeEvent.endsAfterDay"
              [ngClass]="timeEvent.event.cssClass"
              [hidden]="timeEvent.height === 0 && timeEvent.width === 0"
              [style.top.px]="timeEvent.top"
              [style.height.px]="timeEvent.height"
              [style.left.%]="timeEvent.left"
              [style.width.%]="timeEvent.width"
              mwlResizable
              [resizeSnapGrid]="{
                left: dayColumnWidth,
                right: dayColumnWidth,
                top: eventSnapSize || hourSegmentHeight,
                bottom: eventSnapSize || hourSegmentHeight,
              }"
              [validateResize]="validateResize"
              [allowNegativeResizes]="true"
              (resizeStart)="
                timeEventResizeStarted(dayColumns, timeEvent, $event)
              "
              (resizing)="timeEventResizing(timeEvent, $event)"
              (resizeEnd)="timeEventResizeEnded(timeEvent)"
              mwlDraggable
              dragActiveClass="cal-drag-active"
              [dropData]="{ event: timeEvent.event, calendarId: calendarId }"
              [dragAxis]="{
                x: timeEvent.event.draggable && timeEventResizes.size === 0,
                y: timeEvent.event.draggable && timeEventResizes.size === 0,
              }"
              [dragSnapGrid]="
                snapDraggedEvents
                  ? { x: dayColumnWidth, y: eventSnapSize || hourSegmentHeight }
                  : {}
              "
              [ghostDragEnabled]="!snapDraggedEvents"
              [validateDrag]="validateDrag"
              (dragStart)="dragStarted(dayColumns, event, timeEvent, true)"
              (dragging)="dragMove(timeEvent, $event)"
              (dragEnd)="dragEnded(timeEvent, $event, dayColumnWidth, true)"
            >
              @if (
                timeEvent.event?.resizable?.beforeStart &&
                !timeEvent.startsBeforeDay
              ) {
                <div
                  class="cal-resize-handle cal-resize-handle-before-start"
                  mwlResizeHandle
                  [resizeEdges]="{
                    left: true,
                    top: true,
                  }"
                ></div>
              }
              <mwl-calendar-week-view-event
                [locale]="locale"
                [weekEvent]="timeEvent"
                [tooltipPlacement]="tooltipPlacement"
                [tooltipTemplate]="tooltipTemplate"
                [tooltipAppendToBody]="tooltipAppendToBody"
                [tooltipDisabled]="dragActive || timeEventResizes.size > 0"
                [tooltipDelay]="tooltipDelay"
                [customTemplate]="eventTemplate"
                [eventTitleTemplate]="eventTitleTemplate"
                [eventActionsTemplate]="eventActionsTemplate"
                [column]="column"
                (eventClicked)="
                  eventClicked.emit({
                    event: timeEvent.event,
                    sourceEvent: $event.sourceEvent,
                  })
                "
              />
              @if (
                timeEvent.event?.resizable?.afterEnd && !timeEvent.endsAfterDay
              ) {
                <div
                  class="cal-resize-handle cal-resize-handle-after-end"
                  mwlResizeHandle
                  [resizeEdges]="{
                    right: true,
                    bottom: true,
                  }"
                ></div>
              }
            </div>
          }

          @for (
            hour of column.hours;
            track hour.segments[0].date.toISOString();
            let odd = $odd
          ) {
            <div class="cal-hour" [class.cal-hour-odd]="odd">
              @for (
                segment of hour.segments;
                track segment.date.toISOString()
              ) {
                <mwl-calendar-week-view-hour-segment
                  [style.height.px]="hourSegmentHeight"
                  [segment]="segment"
                  [segmentHeight]="hourSegmentHeight"
                  [locale]="locale"
                  [customTemplate]="hourSegmentTemplate"
                  (mwlClick)="
                    hourSegmentClicked.emit({
                      date: segment.date,
                      sourceEvent: $event,
                    })
                  "
                  [clickListenerDisabled]="!hourSegmentClicked.observed"
                  mwlDroppable
                  [dragOverClass]="
                    !dragActive || !snapDraggedEvents ? 'cal-drag-over' : null
                  "
                  dragActiveClass="cal-drag-active"
                  (drop)="eventDropped($event, segment.date, false)"
                />
              }
            </div>
          }
        </div>
      }
    </div>
  </div>
</div>
